/* @font-face {
  font-family: Comfortaa;
  src: url(Comfortaa.ttf);
}

.show-content {
  opacity: 1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Comfortaa';
  text-decoration: none;
  color: #ffffff;
}

body {
  background-color: #191919;
  opacity: 0;
  transition: opacity 2s;
}

header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  background-color: #191919;
  height: 100px;
  width: 100vw;
  padding: 20px;
}

.join-btn {
  background: linear-gradient(
    to right,
    #c70bc5,
    #ff0066,
    #f65800,
    #ffed67,
    #3257ff,
    #3257ff,
    #ffed67,
    #f65800,
    #ff0066,
    #c70bc5
  );
  border: none;
  animation: rainbow_animation 4s ease-in-out infinite;
  background-size: 400% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: small;
  height: 54px;
}

.logo > img {
  width: 140px;
}

.logo > h6 {
  padding-top: 10px;
}

.main-menu {
  padding-top: 100px;
}

@keyframes rainbow_animation {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
} */

/* //////////////////////////////////////////////////////////////////////////// */

.map-wrapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 500px;
  margin-top: 20px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 500px;

  background-color: #333;
}

[class*='copyrights-pane'] {
  display: none !important;
}

[class*='ground-pane'] {
  filter: invert(90%) hue-rotate(220deg) saturate(400%);
}

#__replain_widget {
  filter: invert(95%);
}

.about-us {
  padding-top: 100px;
}

.rainbow-text-1 {
  background: linear-gradient(
    to right,
    #c70bc5,
    #ff0066,
    #f65800,
    #ffed67,
    #3257ff,
    #3257ff,
    #ffed67,
    #f65800,
    #ff0066,
    #c70bc5
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 4s ease-in-out infinite;
  background-size: 400% 100%;
  transform: translateX(-100%);
}

.rainbow-text-2 {
  background: linear-gradient(
    to right,
    #00ff0d,
    #ff23e2,
    #ab4dd4,
    #0509c8,
    #fffb10,
    #fffb10,
    #0509c8,
    #ab4dd4,
    #ff23e2,
    #00ff0d
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 4.2s ease-in-out infinite;
  background-size: 400% 100%;
  transform: translateX(-100%);
}

.rainbow-text-3 {
  background: linear-gradient(
    to right,
    #12ff3a,
    #ff27e2,
    #ff9900,
    #fc0075,
    #fcff49,
    #fcff49,
    #fc0075,
    #ff9900,
    #ff27e2,
    #12ff3a
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 4.4s ease-in-out infinite;
  background-size: 400% 100%;
  transform: translateX(-100%);
}

.rainbow-text-4 {
  background: linear-gradient(
    to right,
    #ff0000,
    #ffe600,
    #00ff00,
    #0084ff,
    #ff00dd,
    #ff00dd,
    #0084ff,
    #00ff00,
    #ffe600,
    #ff0000
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 4.6s ease-in-out infinite;
  background-size: 400% 100%;
  transform: translateX(-100%);
}

.rainbow-text-5 {
  background: linear-gradient(
    to right,
    #9831ef,
    #f80089,
    #f15039,
    #c38e1c,
    #8fb159,
    #8fb159,
    #c38e1c,
    #f15039,
    #f80089,
    #9831ef
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 4.8s ease-in-out infinite;
  background-size: 400% 100%;
  transform: translateX(-100%);
}

.rainbow-border {
  background: linear-gradient(
    to right,
    #c70bc5,
    #ff0066,
    #f65800,
    #ffed67,
    #3257ff,
    #3257ff,
    #ffed67,
    #f65800,
    #ff0066,
    #c70bc5
  );
  animation: rainbow_animation 2s ease-in-out infinite;
  background-size: 400% 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  border-radius: 10px;
}

.phone-num-a {
  text-decoration: none;
}

.form-wrapp {
  width: 100%;
  height: 150px;
}

#phone-input {
  width: 100%;
  padding: 20px;
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: #272727;
  color: #fff;
  font-size: 1.25em;
  margin-bottom: 20px;
}

.phone-btn-border {
  width: 100%;
  border: 1px solid #ffffff;
  border-radius: 10px;
}

#phone-input::placeholder {
  color: #fff;
}

.phone-num-a {
  text-decoration: none;
}

.message-wrapper {
  display: none;
  width: 100%;
  height: 150px;
  border-radius: 10px;
}

.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #272727;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.message-text {
  padding: 0 10px !important;
  margin: 0 !important;
}

.copyright {
  margin-top: 20px;
  margin-bottom: 0;
  text-align: center;
}

.awesome-btn {
  width: 100%;
  height: 100%;
  padding: 20px;
  border: none;
  border-radius: 10px;
  background-color: #272727;
  color: #ffffff;
  font-size: 1.25em;
  position: relative;
  font-weight: 900;
  overflow: hidden;
  cursor: pointer;
}

.awesome-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 20px;
  height: 30px;
  background-color: #9cffb2;
  animation: greet-button infinite ease-in-out 6s;
  border: 1px solid #ffffff;
  mix-blend-mode: difference;
}

.awesome-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 15px;
  height: 25px;
  background-color: #fd9dff;
  animation: greet-button infinite ease-in-out 8s;
  border: 1px solid #ffffff;
  mix-blend-mode: difference;
}

@keyframes greet-button {
  0% {
    transform: translateX(-50px) rotate(360deg);
  }
  50% {
    transform: translateX(calc(100vw - 50px)) rotate(0);
  }
  100% {
    transform: translateX(-50px) rotate(360deg);
  }
}
